<template>
  <el-dialog
    title="添加组织"
    :visible.sync="dialogVisible"
    @close="dialogClose"
    width="40%">
    <div class="switchBox">
      父子级是否联动 <el-switch
        class="switch"
        v-model="ifChain"
        active-text="是"
        inactive-text="否">
      </el-switch>
    </div>
    <cr-org-tree
      v-model="orgObj"
      ref="orgTreeRef"
      class="leftOrgTree"
      :treeHeight="leftOrgTreeHeight"
      showCheckbox
      :checkStrictly="!ifChain"></cr-org-tree>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addPermOrg } from '@/api/authorityManage'
export default {
  name: 'AddUserDialoag',
  props: {
    orgRoleId: {
      type: Number,
      require: true,
      default: () => 0
    }
  },
  data () {
    return {
      dialogVisible: false,
      leftOrgTreeHeight: 500,
      ifChain: false,
      orgObj: {},
      // 查询参数
      queryParams: {
        pageNo: 1,
        name: '',
        orgId: ''
      }
    }
  },
  watch: {
    orgObj: {
      handler: function (newVal) {
        if (!newVal?.id) return
        this.queryParams.orgId = newVal.id
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    async handleSubmit () {
    const orgIds = this.$refs.orgTreeRef.$refs.orgTree.getCheckedKeys()
      if (orgIds.length <= 0) {
        return this.$message.error('组织机构不能为空')
      }
      await addPermOrg({ orgRoleId: this.orgRoleId, ifChain: this.ifChain, orgIds })
      this.$emit('getPermOrgListData')
      this.dialogVisible = false
      this.$message.success('操作成功')
    },
    open () {
      this.dialogVisible = true
    },
    dialogClose () {
      this.$emit('changeOrgStatus', false)
    }
  }
}
</script>
<style scoped lang="scss">
.table-page-search-wrapper{
  padding-top: 0;
}
.leftOrgTree{
  border: 1px solid #e8e8e8;
  padding: 10px;
}
::v-deep .el-switch__label{
  text-align: center;
}
.switchBox{
  margin-bottom: 10px;
  height: 30px;
  line-height: 30px;
}
</style>
